<template>
	<view class="echarts-page flexc">
		<view class="header" :style="{ backgroundColor: data.activeColor }">
			<view class="header-top flexr flex-a-c flex-j-b">
				<view class="flexr flex-a-c" @click="dateShow">
					<text>{{ data.dateTitle }}</text>
					<text class="iconfont icon-xiajiantou ml-10"></text>
				</view>
				<view class="header-top-t">
					<text :class="data.checkType == 1 ? 'ac' : 'a2'" @click="navBtn(1)">支出</text>
					<text :class="data.checkType == 2 ? 'ac' : 'a1'" @click="navBtn(2)">入账</text>
				</view>
			</view>
			<view class="header-b">
				<text :class="['header-b-t', data.checkType == 1 ? 'a1' : 'a2']">共{{ data.checkType == 1 ? '支出' : '入账' }}</text>
				<text>￥ {{ data.totalPrice }}</text>
			</view>
		</view>
		<view class="flex1 over-auto">
			<view class="charts-box" v-if="data.contentList.length > 0">
				<view class="pt">{{ data.checkType == 1 ? '支出' : '入账' }}构成</view>
				<qiun-data-charts type="pie" style="height: 500upx" :opts="data.opts" :chartData="data.chartData" />
			</view>

			<view class="charts-box" v-if="data.contentList.length > 0">
				<view class="pt">月度支出</view>
				<qiun-data-charts type="column" style="height: 500upx" :opts="data.opts1" :chartData="data.chartData1" :ontouch="true" />
			</view>
			<view class="content" v-if="data.contentList.length > 0">
				<view class="flexr flex-a-c mt-20" v-for="(item, index) in data.contentList" :key="index" @click="godetail(index)">
					<view class="flexr flex-a-c">
						<view :class="['iconfont', item.icon, 'icon-set', data.checkType == 1 ? 'ac1' : 'ac2']"></view>
						<view class="">{{ item.title }}</view>
					</view>
					<view class="flex1 progress"><progress :activeColor="data.activeColor" :percent="80" stroke-width="6" border-radius="20px" /></view>
					<view class="flexr flex-a-c">
						<text>￥{{ item.price }}</text>
						<text class="iconfont icon-youjiantou ic"></text>
					</view>
				</view>
			</view>
			<view class="nomore" v-if="data.contentList.length <= 0">当前还没有数据哦~，快去添加吧</view>
		</view>
		<!-- 时间的选择弹框 -->
		<uni-popup ref="popup1" type="bottom" border-radius="10px 10px 0 0">
			<view class="pop-wrap flexc">
				<view class="pop-nav">
					<view class="">请选择月份</view>
					<view class="close iconfont icon-guanbi1" @click="closeBtn(1)"></view>
				</view>
				<view class="flex1 over-auto pd npt">
					<view class="" v-for="(item, index) in data.dateList" :key="item">
						<view class="d-t">{{ item.key }}</view>
						<view class="flexr flex-a-c flex-j-b flex-wr">
							<view :class="['d-box', index == data.pindex && k == data.num ? 'active' : '']" v-for="(val, k) in item.val" :key="k" @click="dateBtn(index, k)">
								{{ val }}月
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { computed, reactive, ref } from 'vue';
import { useStore } from '../../store';
import requestApi from '../../utils/api.js';
import { addCom } from '../../utils/util.js';
import { onShow } from '@dcloudio/uni-app';
const store = useStore();
const popup1 = ref(null);
const data = reactive({
	dateTitle: '', //选择日期的val值
	date: 2022, //当前筛选出用户记录的最小的年份进行日期的展示
	dateList: [], //当前最小日期到当前月份的数据
	pindex: 0, //日期样式选中
	num: 0, //日期样式选中
	checkType: 1, //---1 支出---2 入账
	chartData: {},
	activeColor: computed(() => {
		if (data.checkType == 1) {
			return '#3eb575';
		}
		return '#f0b73a';
	}),
	contentList: [],
	totalPrice: 0,
	//您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
	opts: {
		padding: [5, 5, 5, 5],
		enableScroll: false,
		extra: {
			pie: {
				activeOpacity: 0.5,
				activeRadius: 10,
				offsetAngle: 0,
				labelWidth: 15,
				border: false,
				borderWidth: 3,
				borderColor: '#FFFFFF'
			}
		}
	},
	chartData1: {},
	//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
	opts1: {
		padding: [15, 15, 0, 5],
		touchMoveLimit: 24,
		enableScroll: false,
		legend: {},
		xAxis: {
			disableGrid: true,
			scrollShow: false,
			itemCount: 6
		},
		yAxis: {
			data: [
				{
					min: 0
				}
			]
		},
		extra: {
			column: {
				type: 'group',
				width: 10,
				activeBgColor: '#000000',
				activeBgOpacity: 0.08
			}
		}
	}
});
// 跳转具体数据页面
const godetail = k=>{
	uni.navigateTo({
		url:`/pages/set/set?k=${k}&date=${data.dateTitle.split('年')[1]}&checkType=${data.checkType}`
	})
}
// 柱状图
const getServerData1 = (categories = [], arr = []) => {
	//模拟从服务器获取数据时的延时
	// setTimeout(() => {
	//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
	let res = {
		categories,
		series: [
			{
				name: '当前分类支出金额',
				data: arr
			}
		]
	};
	data.opts1.color = [data.activeColor];
	data.chartData1 = JSON.parse(JSON.stringify(res));
	// }, 500);
};
// 饼图
const getServerData = (arr) => {
	//模拟从服务器获取数据时的延时
	// setTimeout(() => {
	//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
	let res = {
		series: [
			{
				data: arr
			}
		]
	};
	data.chartData = JSON.parse(JSON.stringify(res));
	// }, 500);
};

// 日期选择的逻辑
const dateBtn = (p, k) => {
	data.pindex = p;
	data.num = k;
	data.dateTitle = `${data.dateList[p].key}年${data.dateList[p].val[k]}月`;
	popup1.value.close();
};
//日期初始化处理
const getDate = () => {
	data.dateList = [];
	const date = new Date();
	let year = date.getFullYear();
	let month = date.getMonth() + 1;
	const y = year - data.date;
	const l = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
	if (y > 0) {
		for (var i = 0; i < y; i++) {
			let obj = {
				key: data.date + i,
				val: l
			};
			data.dateList.push(obj);
		}
	}
	data.dateList.push({
		key: year,
		val: l.slice(0, month)
	});

	data.pindex = data.dateList.length - 1;
	data.num = data.dateList[data.dateList.length - 1].val.length - 1;
	data.dateTitle = `${data.dateList[data.pindex].key}年${data.dateList[data.pindex].val[data.num]}月`;
};
// 时间弹框
const dateShow = () => {
	popup1.value.open();
};
// 初始化获取数据列表接口
const init = () => {
	// 每次请求总支出和收入归0，重新计算
	data.totalPrice = 0;
	const m = data.dateList[data.pindex].val[data.num] < 10 ? '0' + data.dateList[data.pindex].val[data.num] : data.dateList[data.pindex].val[data.num];
	const params = {
		id: store.j_token,
		type: 'get',
		date: `${data.dateList[data.pindex].key}-${m}`,
		isType: data.checkType + ''
	};
	console.log(params, 'params------');
	requestApi('jSign', params).then((res) => {
		if (res.result.status === 'S') {
			let arr = [];
			res.result.data.forEach((item) => {
				let foundObj = arr.find((obj) => obj.title === item.title);
				if (foundObj) {
					foundObj.list.push(item);
				} else {
					let obj = {
						title: item.title,
						list: [item],
						price: 0,
						icon: item.icon
					};
					arr.push(obj);
				}
			});

			console.log(arr, 'arr---------');
			let arr1 = [],
				arr2 = [],
				categories = [];
			arr.forEach((item) => {
				item.list.forEach((val) => {
					item.price = addCom(Number(item.price), Number(val.price));
				});
				data.totalPrice = addCom(Number(data.totalPrice), Number(item.price));
				let obj = {
					name: item.title,
					value: item.price
				};
				categories.push(item.title);
				arr2.push(item.price);
				arr1.push(obj);
			});
			console.log(arr1, 'arr1--------');
			getServerData(arr1);
			getServerData1(categories, arr2);
			data.contentList = arr;
			store.contentList = arr
		} else {
			data.contentList = [];
			store.contentList = []
		}
	});
};
// 初始化处理日期数据
getDate();
const navBtn = (k) => {
	data.checkType = k;
	init();
};
onShow(() => {
	init();
});
</script>

<style lang="scss">
.echarts-page {
	width: 100%;
	height: 100%;
	.content {
		margin: 40upx 0;
		padding: 0 40upx;
		font-size: 26upx;
		.ic {
			font-size: 24upx;
		}
	}
	.mt-20 {
		margin-top: 20upx;
	}
	.icon-set {
		font-size: 24upx;
		color: #ccc;
		width: 40upx;
		height: 40upx;
		border-radius: 50%;
		background-color: #efefef;
		line-height: 40upx;
		text-align: center;
		margin-right: 20upx;
	}
	.ac1 {
		color: #fff;
		background-color: #3eb575;
	}
	.ac2 {
		color: #fff;
		background-color: #f0b73a;
	}
	.progress {
		padding: 0 20upx;
	}
	.pt {
		margin-bottom: 40upx;
	}
	.header {
		padding: 80upx 40upx;
		color: #fff;
		&-top {
			&-t {
				& > text {
					padding: 10upx 20upx;
					margin-left: 20upx;
					border-radius: 10upx;
					font-size: 24upx;
				}
				.ac {
					background-color: rgba(255, 255, 255, 0.3);
					color: #fff;
				}
			}
		}
		.a1 {
			color: #8fd4af;
		}
		.a2 {
			color: #f2d780;
		}
		&-b {
			text-align: center;
			font-size: 36upx;
			font-weight: bold;
			margin-top: 80upx;
			&-t {
				font-size: 28upx;
				font-weight: normal;

				margin-right: 20upx;
			}
		}
	}
	.uni-progress-bar {
		border-radius: 15upx;
	}
	.uni-progress-inner-bar {
		border-radius: 15upx;
	}
	.charts-box {
		width: 100%;
		height: 600upx;
		box-sizing: border-box;
		padding: 40upx;
	}
	.pop-wrap {
		height: 800upx;
		background-color: #fafafa;
		border-radius: 20upx 20upx 0 0;
		box-sizing: border-box;
		padding-bottom: var(--window-bottom);
		.pop-nav {
			height: 100upx;
			line-height: 100upx;
			text-align: center;
			border-bottom: 1upx solid #ccc;
			position: relative;
			padding: 0 40upx;
			.close {
				position: absolute;
				top: 50%;
				left: 40upx;
				font-size: 40upx;
				transform: translateY(-50%);
			}
		}
		.pd {
			font-size: 30upx;
			background: #fafafa;
			padding: 60upx 40upx 0;
			.pop-tt,
			.d-box {
				width: 30%;
				text-align: center;
				box-sizing: border-box;
				padding: 20upx 40upx;
				border-radius: 20upx;
				background: #fff;
			}

			.pop-f::after {
				content: '';
				width: 30%;
			}
			.pop-title {
				font-size: 26upx;
			}
			.mb-20 {
				margin-bottom: 20upx;
			}
			.active {
				background-color: #ffaa7f;
				color: #fff;
			}
		}
		.d-t {
			margin: 40upx 0;
			text-align: center;
		}
		.d-box {
			margin-bottom: 20upx;
		}
		.npt {
			padding: 0 40upx 0;
		}
	}
	.nomore {
		text-align: center;
		margin: 20upx 0;
		font-size: 28upx;
		color: #ccc;
	}
}
</style>
